<template>
    <!-- svg 文件 -->
    <!--    
    <div>
        <div>{{plusOne}}</div>
        <el-button @click="aaa">123</el-button>
    </div> 
    -->
    <svg :class="svgClass" aria-hidden="true">
        <use :xlink:href="iconName"></use>
    </svg>
</template>

<script>
import {reactive, ref, isRef, toRefs, onMounted, computed } from "@vue/composition-api"
export default {
    name: "SvgIcon",
    //父子组件传值 简单语法 or 复杂语法 props可以是基础数据或对象，用于接收父组件的数据
    //props:['iconClass', 'className'],
    props: {
        //分页
        iconClass: {
            type: String,
            default: '',
            /* 
            default:() => [] //es6
            default:function(){ //es5
                return []
            }
            */
            // required: true
        },
        className: {
            type: String,
            default: ''
        },
    },

    setup(props){
        // console.log(props.iconClass)
        // console.log(props.className)
        const msg = ref("磊磊闲说");
        // const count = ref(10);
        // const plusOne = computed(() => {
        //     return count.value + 1
        // })
        // const aaa = ()=>{
        //     count.value = 20
        // }

        //监听属性变化，并计算属性,一般适用于计算金额，财务  符号’‘ ``的区别
        const iconName = computed(() => `#icon-${props.iconClass}`)//Nav子组件传进的值，一直在监听数值的变化，如数值变化，会得出最终结果，并返回，
        const svgClass = computed(() => {
            if(props.className){
                return `svg-icon ${props.className}`
            }else{
                return `svg-icon`
            }
        }) 
        return{
            msg,
            // plusOne,
            // aaa
            iconName,
            svgClass
        }
    }
}
</script>

<style lang="scss" scoped>
.svg-icon{
    width: 1em;
    height: 1em;
    fill: currentColor;
/*     color: red;
    &.font12{
        font-size: 12px;
    }
    &font50{
        font-size: 50px;
    } */
}
</style>